<template>
     <div class="box">
        <div class="content">
            <div class="left">
                <img src="https://1271981054-1256167451.cos.ap-nanjing.myqcloud.com/1628654292509.jpeg" alt="">
            </div>
            <div class="right">
                <div class="logo">
                    <img src="../../assets/ops1.png" alt="">
                </div>
                <div class="title-logo">
                    <div class="title">
                        OPEN<br />SPACE
                    </div>
                    <div class="status-box">注册</div>
                </div>
                <div class="input">
                    <div class="input-son">
                        <a-input v-model="username" style="border: 0px solid #d9d9d9;" placeholder="账号" />
                    <a-divider style="margin:0 !important" />
                    </div>
                    <div class="input-son">
                        <a-input @input="inputPassword" v-model="password" style="border: 0px solid #d9d9d9;" placeholder="密码" />
                    <a-divider style="margin:0 !important" />
                    </div>
                    <div class="input-son">
                        <a-input @input="inputRepassword" v-model="repassword" style="border: 0px solid #d9d9d9;" placeholder="确认密码" />
                        
                    <a-divider style="margin:0 !important" />
                    <!-- <div v-if="visible" class="nosame">输入不一致</div> -->
                    </div>
                    <div class="register">
                        <router-link style="text-align:right;color:#DA4848;" to="/login">立即登录</router-link>
                    </div>
                </div> 
                <div class="login-box">
                    <div @click="register" class="login">
                    <a-icon type="right" />
                </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {register,login} from '../../../API/index'
export default {
    data () {
        return {
            username:'',
            password:'',
            repassword:'',
            visible:false
        }
    },
    methods:{
        inputRepassword(e){
             console.log(e.data,e.data!=this.repassword)
            if(e.data!=this.password){
                this.visible = true
                 this.$forceUpdate()
            }else{
                this.visible = false
                 this.$forceUpdate()
            }
        },
        inputPassword(e){
            console.log(e.data,e.data!=this.repassword)
            if(e.data!=this.repassword){
                this.visible = true
                this.$forceUpdate()
            }else{
                this.visible = false
                 this.$forceUpdate()
            }
        },
        login(username,password){
            let data = {
                username:username,
                password:password
            }
            login(data).then(res =>{
                    let _r = res.data
                    localStorage.setItem("token", _r.token);
                    localStorage.setItem("username", _r.username);
                    this.$router.replace('/index-manage')
                    this.$message.info("登录成功")
            })
        },
        register(){
            if(this.password!=this.repassword){
                return 
            }
            let data = {
                username:this.username,
                password:this.password
            }
            register(data).then(res =>{
                console.log(res)
                let _r = res
                if(_r.code==200){
                    this.login(this.username,this.password)
                }
            })
        }
    }
}
</script>

<style  scoped>
 
.box{
}
.content{
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -500px;
    margin-top: -300px;
    height:600px;/* height的一半 */
    width:1000px; /*width的一半 */
    box-shadow: 5px 2px 81px rgba(0, 0, 0, 0.219);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

}
.left{
    width: 55%;
    height: 100%;
}
.left img{
    height: 100%;
    object-fit:cover;
    width: 100%;
    overflow: hidden;
}
.right{
    flex: 1;
    padding: 30px;
    padding-top: 60px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-self: start;
    align-items: flex-start;
}
.right img{
    width: 70px;
    border:2px solid #000;
}
.title-logo{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 20px;
    width: 100%;
}
.title-logo .title{
    font-size: 60px;
    font-weight: bolder;
    line-height: 50px;
    text-align: left;
}
.title-logo .status-box{
    padding: 5px 15px;
    background-color: #d8d8d862;
}
.input{
    margin-top: 10px;
    width: 100%;
}
.input-son{
    margin: 20px 0;
}
.login{
    width: 64px;
    height: 64px;
    background-color: #1374FF;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    color: #fff;
}
.login-box{
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
.register{
    width: 100%;
    text-align: end;
}
.login:hover{
    background-color: rgb(37, 192, 120);
}
.nosame{
    width: 100%;
    text-align: left;
    padding: 10px 10px;
    padding-bottom: 0;
    color:red;
}
</style>